import styled from 'styled-components'
import img from '@img/all.png'
import vmpAddImg from '@img/vmp-add.png'
export const StyledWrapBlock = styled.div<{ left: number; width: number; top: number; height: number }>`
	color: #333;
	position: absolute;
	left: ${(props) => props.left + 'px'};
	top: ${(props) => props.top + 'px'};
	width: ${(props) => props.width + 'px'};
	height: ${(props) => props.height + 'px'};
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
`
export const StyledViewWrap = styled.div`
	height: 66px;
	width: 336px;
	padding-left: 83px;
	overflow: hidden;
	& > .tvwall-style-list {
		float: left;
		overflow: hidden;
		& > .tvwall-style {
			width: 80px;
			text-align: center;
			overflow: hidden;
			float: left;
			position: relative;
			& > .currentview {
				display: inline-block;
				position: relative;
				height: 42px;
				width: 65px;
				background-color: #efefef;
				border: 1px solid #cccccc;
			}
			.TVstyleText {
				width: 100%;
				display: inline-block;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.tvwall-style-btn {
			& > .box-menu-wrap {
				display: block;
				position: absolute;
				right: 8px;
				top: 1px;
				span {
					display: none;
				}
			}
			&:hover {
				span {
					display: inline-block;
				}
			}
		}
		.tvwall-style-btn.selected {
			.currentview {
				border: 1px solid #3399ff;
			}
		}
	}
	.tvwall-style {
		width: 80px;
		text-align: center;
		overflow: hidden;
		float: left;
		position: relative;
	}
	.tvwall-style-text {
		width: 100%;
		display: inline-block;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.tvwall-style-icon {
		display: inline-block;
		height: 42px;
		width: 64px;
		background: url(${vmpAddImg}) no-repeat center center #f9f9f9;
		border: 1px dashed #cccccc;
	}
`
export const DeleteIcon = styled.span`
	background: url(${img}) no-repeat scroll -184px -226px;
	height: 23px;
	width: 23px;
	display: inline-block;
	&:hover {
		background-position: -207px -226px;
	}
	&:active {
		background-position: -230px -226px;
	}
`
